<template>
  <!--<div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>-->
  <router-view />
  <Setings v-show="getThemeConfig.lockScreenTime !== 0" ref="setingsRef" />
</template>

<script>
import {
  computed,
  ref,
  getCurrentInstance,
  onBeforeMount,
  onMounted,
  onUnmounted,
  nextTick,
  defineComponent,
  watch,
} from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
// import { useStore } from "@/store/index";
import { useTitle } from "@/utils/setWebTitle";
import { Local } from "@/utils/storage";
// import setIntroduction from "@/utils/setIconfont";
// import LockScreen from "@/layout/lockScreen/index.vue";
import Setings from "@/layout/navBars/breadcrumb/settings.vue";
export default defineComponent({
  name: "App",
  components: { Setings },
  setup() {
    const { proxy } = getCurrentInstance();
    const setingsRef = ref();
    const route = useRoute();
    const store = useStore();
    const title = useTitle();
    // 获取布局配置信息
    const getThemeConfig = computed(() => {
      return store.state.themeConfig.themeConfig;
    });
    // 布局配置弹窗打开
     const openSetingsDrawer = () => {
      setingsRef.value.openDrawer();
    };
    // 设置初始化，防止刷新时恢复默认
    onBeforeMount(() => {
      // 设置批量第三方 icon 图标
      // setIntroduction.cssCdn();
      // 设置批量第三方 js
      // setIntroduction.jsCdn();
    });
    // 页面加载时
    onMounted(() => {
      nextTick(() => {
        // 监听布局配置弹窗点击打开
         proxy.mittBus.on("openSetingsDrawer", () => {
          openSetingsDrawer();
        });
        // 获取缓存中的布局配置
        if (Local.get("themeConfig")) {
          store.dispatch(
            "themeConfig/setThemeConfig",
            Local.get("themeConfig")
          );
          document.documentElement.style.cssText =
            Local.get("themeConfigStyle");
        }
      });
    });
    // 页面销毁时，关闭监听布局配置
    onUnmounted(() => {
      proxy.mittBus.off("openSetingsDrawer", () => {});
    });
    // 监听路由的变化，设置网站标题
    watch(
      () => route.path,
      () => {
        title();
      }
    );
    return {
      setingsRef,
      getThemeConfig,
    };
  },
});
</script>

<style lang="scss">
/**#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}*/
</style>
